<script setup>
	import {
		ref,
		computed,
		reactive,
		onMounted
	} from "vue";
	import {
		list
	} from "./index.js";
	const props = defineProps({});
	onMounted(() => {});
	let platform = uni.getStorageSync("platform");
	const goback = () => {
		uni.navigateBack();
	};
	const removeUser = () => {
		uni.removeStorageSync("USER_TOKEN_INFOS");
		setTimeout(() => {
			uni.navigateTo({
				url: "/pages/login/login",
			});
		}, 500);
	};
	const showPage = (path) => {
		uni.navigateTo({
			url: path,
		});
	};
</script>

<template>
	<view class="wrap" :style="{
      height: platform.gaodu + 'rpx',
    }">
		<view class="header-wrap uni-row" :style="{
        paddingTop: platform.dingbu + 'rpx',
        height: platform.dingbu + 96 + 'rpx',
      }">
			<image class="left" src="/static/img/goback-black.png" @click="goback" mode="widthFix" />
			<view class="title"> 个人中心 </view>
			<image style="opacity: 0" class="left" src="/static/img/goback-black.png" @click="goback" mode="widthFix" />
		</view>
		<scroll-view scroll-y="true" :style="{ height: platform.gaodu - platform.dingbu - 96 + 'rpx' }">
			<view class="body">
				<view class="item uni-row" v-for="(item, index) in list" :key="index" @click="showPage(item.path)">
					<view class="left uni-row">
						<image :src="item.icon" class="icon"></image>
						<view class="danci">
							{{ item.title }}
						</view>
					</view>
					<view class="right uni-row"> 去看看 </view>
				</view>
				<view class="btn uni-row" @click="removeUser" :style="{
            marginTop: platform.rpxs > 1.5 ? '100rpx' : '40rpx',
          }">
					退出登录
				</view>
			</view>
			<view class="footer"> </view>
		</scroll-view>
	</view>
</template>

<style scoped lang="less">
	.wrap {
		background: url("/static/img/wolrd/bg.png");
		background-size: 100% 100%;

		.header-wrap {
			justify-content: space-between;
			padding-left: 24rpx;
			padding-right: 24rpx;

			.left {
				width: 48rpx;
			}

			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}
		}

		.body {
			padding: 0 28rpx 40rpx;

			.item {
				justify-content: space-between;
				padding: 0 20rpx;
				height: 140rpx;
				background: #ffffff;
				border-radius: 16rpx;
				margin-bottom: 16rpx;

				.left {
					.icon {
						width: 100rpx;
						height: 100rpx;
						margin-right: 24rpx;
					}

					.danci {
						font-size: 32rpx;
						color: #333333;
					}
				}

				.right {
					justify-content: center;
					font-size: 26rpx;
					color: #ff9e30;
					width: 126rpx;
					height: 60rpx;
					background: #fff6ec;
					border-radius: 16rpx;
				}
			}

			.btn {
				justify-content: center;
				height: 88rpx;
				background: #9561f3;
				border-radius: 16rpx;
				font-size: 32rpx;
				color: #ffffff;
			}
		}
	}
</style>